<template slot-scope>
    <!--导航栏-->
    <div class="my" >
        <div id="header">
            <div style="background-color: #8f000b; height: 110px;">
                <span style="width: 50%;height:100%;" ><img src="../../../static/img/scgsxy_logo.png" style="float: left; height:40%;padding: 2% "/></span>
                <span style="width: 50%;height:100%;" ><img src="../../../static/img/pkucloud1h100.png" style="float: right;height:50%;"/></span>
            </div>
            <div class="app1">
                <el-menu :default-active="active" class="el-menu-demo" mode="horizontal" active-text-color="#8f000b">
                    <el-menu-item style="width: 7rem  ;" index="1"><router-link :to="{name:'Home-page'}">首页</router-link></el-menu-item>
                    <el-menu-item style="width: 7rem ; " index="2"><router-link :to="{name:'Competition-dynamics'}">竞赛动态</router-link></el-menu-item>
                    <el-menu-item style="width: 7rem  ;" index="3"><router-link :to="{name:'Success-competition'}">竞赛佳绩</router-link></el-menu-item>
                    <el-menu-item style="width: 7rem  ;" index="7"><router-link :to="{name:'About-us'}">获奖名单</router-link></el-menu-item>
                    <el-menu-item  index="4" style="float: right; margin: auto 0;" v-if="!show_ind">
                        <router-link :to="{name:'Land'}"><el-button type="primary" plain @click="toLand">登录</el-button></router-link>
                        <router-link :to="{name:'Registe'}"><el-button type="danger" plain @click="toRegiste">注册</el-button></router-link>
                    </el-menu-item>
                    <!-- 已登录组件 -->
                    <el-submenu index="6" style="float: right;" v-if="show_ind">
                        <template slot="title"><router-link :to="{name:'PersonalInfo'}">欢迎您！{{schoolNum}}</router-link></template>
                        <el-menu-item index="6-1"><router-link :to="{name:'PersonalInfo'}">设置</router-link></el-menu-item>
                    </el-submenu>
                    <el-submenu index="5" style="float: right;" v-if="show_ind">
                        <template slot="title">我的</template>
                        <el-menu-item index="5-1"><router-link :to="{name:'Mygame'}">比赛</router-link></el-menu-item>
                        <el-menu-item index="5-2"><router-link :to="{name:'Personal-achievement'}">获奖</router-link></el-menu-item>
                    </el-submenu>
                    <el-menu-item index="4"   style="color:blue ; float: right" v-if="show_ind"><el-button type="danger" plain @click="logout" >退出</el-button></el-menu-item>
                </el-menu>
            </div>
        </div>
        <div style="height: 200px">
            <br> <!--线分割-->
            <div style="height:5px;"></div>
            <div class="Info1" style="width: 80%;text-align: center">
	         <span style="width: 100px;">
		     <img src="../../assets/kong.png" style="width: 5rem ; float:left;" >
	     	<img src="../../assets/logo.png" style="width: 5rem ; float:left;" >
		    </span>
                <span style="font-size: 1.6rem ; " >{{schoolNum}}的{{totop()}}信息</span>
            </div>
            <!--线分割-->
            <span style="height:4px; background-color:#e6e6e6; float:right;"></span>

            <el-container style="height: 50rem;">
                <el-aside width="250px" style="border-right:3px solid #e6e6e6;">
                    <div class="Info2">
                        <el-menu
                            :default-active="_default_active"
                            class="el-menu-vertical-demo"
                            style="font-size: 30rem; text-align: center ;">
                            <el-menu-item index="7" @click="toNext(1)">
                                <i class="el-icon-location"></i>
                                <span style="text-align: center;" slot="title">个人信息</span>
                            </el-menu-item>
                            <el-menu-item index="8" @click="toNext(2)">
                                <i class="el-icon-menu"></i>
                                <span slot="title">我的比赛</span>
                            </el-menu-item>
                            <el-menu-item index="9" @click="toNext(3)">
                                <i class="el-icon-document"></i>
                                <span slot="title">个人成绩</span>
                            </el-menu-item>
                            <el-menu-item index="10" @click="toNext(4)">
                                <i class="el-icon-setting"></i>
                                <span slot="title">账号安全</span>
                            </el-menu-item>
                        </el-menu>
                    </div>
                </el-aside>
                <el-main >
                    <!--线分割-->
                    <div style="height:6px;background-color: #e6e6e6;"></div>
                </el-main>
            </el-container>
            <br>
        </div>

        <!--底部-->
        <div   style=" position:relative;top: 450px; padding: 0; background-color: white; z-index: -1;">
            <div   style="position: relative; height: 60px;">
                <div id="_img1" style="overflow: hidden;">
                    <ul><li>
                        <img src="../../../static/img/wave_01.png" style="animation: move_wave 80s infinite;">//1
                        <img  src="../../../static/img/wave_01.png" style="animation: move_wave 80s infinite;">
                    </li></ul>
                </div>
                <div id="_img2" style="overflow: hidden;">
                    <ul><li>
                        <img src="../../../static/img/wave_02.png" style="animation: move_wave 50s infinite;">
                        <img src="../../../static/img/wave_02.png" style="animation: move_wave 50s infinite;">
                    </li></ul>
                </div>
            </div>
            <div  style="background-color: rgb(0,159,217);">
                <div  style="width: 80%; margin: 0 auto;">
                    <div  class="fot-l"> 成都校区：四川省成都市郫都区团结镇学院街65号 邮编：611745<br>
                        眉山校区：眉山市眉州大道岷东段9号 邮编：620000<br>
                        联系电话&nbsp;&nbsp;&nbsp;&nbsp;招办：(028)87953080 校办:(028)87953896 人事处：(028)87953900 后勤处：(028)87953092<br>
                        Email：yb@stbu.edu.cn&nbsp;&nbsp; <br>
                        技术支持：四川工商学院1205
                    </div>
                    <div class="font-r">
                        <ul id="_footer_ul1">
                            <li style="margin-left: 0;"> <span><img src="../../../static/img/weixin.jpg" width="100%" height="100%" ></span> <i>微信</i> </li>
                            <li> <span><img src="../../../static/img/QQ.jpg" width="100%" height="100%"></span> <i>QQ智慧校园</i> </li>
                            <li> <span><img src="../../../static/img/weibo.jpg" width="100%" height="100%"></span> <i>微博</i> </li>
                            <li> <span><img  src="../../../static/img/vr.png" width="100%" height="100%"></span> <i>VR工商</i> </li>
                        </ul>
                    </div>
                </div>
                <br>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                activeIndex:'',
                show_ind: false,
                schoolNum:'',//获取学号
                collapse: false,
                _default_active: "",
                top:"个人",
            }
        },
        methods:{
            toLand(){
                this.$router.push({name:'Land'})
            },
            toRegiste() {
                this.$router.push({name: 'Registe' })
            },
            logout(){
                var storage=window.localStorage;
                storage.clear();
                if(!window.localStorage){
                    alert("浏览器支持localstorage");
                }else{
                    var storage=window.localStorage;
                    //第三种方法读取
                    this.schoolNum=storage.getItem("username");
                    console.log(this.schoolNum);
                    if(this.schoolNum==null)
                        this.show_ind=false;
                }
            },
            toNext(index) {
                if(index ==1 ) this.$router.push({
                    name: 'PersonalInfo'
                })
                if(index == 2) this.$router.push({
                    name: 'Mygame'
                })
                if(index ==3) this.$router.push({
                    name: 'Personal-achievement'
                })
                if(index == 4) this.$router.push({
                    name: 'Account-security'
                })
            },
            totop(){
                if(this.$route.name=='PersonalInfo') this.top="个人";
                if(this.$route.name=='Account-security') this.top="账号";
                if(this.$route.name=='Personal-achievement') this.top="成绩";
                if(this.$route.name=='Mygame') this.top="比赛";
                return this.top
            },
            mounted() {
                //导航
                if (this.$route.name == 'Home-page') this.activeIndex = '1';
                if (this.$route.name == 'Competition-dynamics') this.activeIndex = '2';

                //分割
                if(this.$route.name=='PersonalInfo') this._default_active="7";
                if(this.$route.name=='Mygame') this._default_active="8";
                if(this.$route.name=='Personal-achievement') this._default_active="9";
                if(this.$route.name=='Account-security') this._default_active="10";

            },
        },
        created() {
            if(!window.localStorage){
                alert("浏览器支持localstorage");
            }else{
                var storage=window.localStorage;
                //第三种方法读取
                this.schoolNum=storage.getItem("username");
                console.log(this.schoolNum);
                if(this.schoolNum!=null)
                    this.show_ind=true;
            }
        }
    }
</script>

<style scoped>
    /*导航*/
    .app2 {
        font-family: 微软雅黑;
        text-align: center;
        font-size: 13px;
        content: "黑体";
        height: 10em;
    }
    /*底部*/
    @keyframes move_wave {
        0% {
            transform: translateX(0);
        }
        50% {
            transform: translateX(-30%);
        }
        100% {
            transform: translateX(0);
        }
    }
    #_img1 {
        height: 60px;
        width: 100%;
        position: absolute;
        z-index: 15;
    }
    #_img2 {
        height: 60px;
        width: 100%;
        position: absolute;
        z-index: 10;
    }
    #_img1>ul, #_img2>ul {
        padding: 0;
    }
    #_img1>ul>li, #_img2>ul>li {
        list-style-type: none;
    }
    #_footer_ul1 {
        list-style-type: none;
        padding: 0;
        margin: 10px 0;
        display: flex;
    }
    #_footer_ul1 li {
        list-style-type: none;
        width: 100px;
        height: 100px;
        margin: 0 10px;

    }
    .my{
        overflow: auto;
        width: 100%;
        margin: auto 0;
        height: 100%;
    }

    .red{
        color:red
    }
    Info2 {
        font-family: Helvetica, sans-serif;
        text-align: center;
        font-size: 18px;
        content: "黑体";
        line-height: 100px;
    }
    Info1 {
        font-family: Helvetica, sans-serif;
        text-align: center;
        font-size: 18px;
        content: "黑体";
        line-height: 100px;

    }
</style>
